async function initPage() {
  let { data: { data: { user_pic, nickname } } } = await getUserinfo()

  let userinfo = document.querySelectorAll('.userinfo')
  let htmlStr = ''
  if (user_pic) {
    htmlStr = `
    <img src=${user_pic} class="layui-nav-img" />
    <span id="welcome">欢迎 ${nickname}</span>
    `
  } else {
    htmlStr = `
    <span class="text-avatar">${nickname.charAt(0).toUpperCase()}</span>
    <span id="welcome">欢迎 ${nickname}</span>
    `
  }
  Array.from(userinfo).forEach(item => {
    item.innerHTML = htmlStr
  })
}
initPage()

let btnLogout = document.querySelector('#btnLogout')
btnLogout.addEventListener('click', function () {
    location.href = '/login.html'
    localStorage.removeItem('token')
})

// 根据获取的数据得到需要的时间格式
function getTime(str) {
    return moment(str).format('YYYY-MM-DD HH:mm')
}

let mask = document.querySelector('.mask')
let modal = document.querySelector('.modal')
let text = document.querySelector('.text')
let icon = document.querySelector('.modal .iconfont')

async function rederDetail(id) {
    let res = await getDetail(id)
    let { cate_name, content, cover_img, state, username, pub_date, title } = res.data.data
    let detail = `
  <div class="detail">
        <div class="cross">×</div>
        <div class="tips">文章预览</div>
        <div class="title">${title}</div>
        <div class="introduce">
          <div class="author">作者：${username}</div>
          <div class="发布时间">发布时间：${getTime(pub_date)}</div>
          <div class="cate">所属分类：${cate_name}</div>
          <div class="status">状态：${state}</div>
        </div>
        <div class="img-container">
          <img src='http://big-event-vue-api-t.itheima.net${cover_img}' alt="">
        </div>
        <div class="content">${content}</div>
      </div>
    </div>`
    mask.innerHTML = detail
    mask.style.opacity = "1"
    mask.style.pointerEvents = "all"
    document.querySelector('.detail').style.top = "119px"
    document.querySelector('.cross').addEventListener('click', function () {
        mask.style.opacity = "0"
        document.querySelector('.detail').style.top = "90px"
        mask.style.pointerEvents = "none"
    })
}

function appear(code, msg) {
    modal.style.opacity = "1"
    modal.style.top = "30px"
    isSuccess(code, msg)
}

function isSuccess(code, msg) {
    if (code !== 0) {
        modal.className = "modal fail"
        icon.className = "iconfont icon-cuowuguanbiquxiao-yuankuang"
    } else {
        modal.className = "modal success"
        icon.className = "iconfont icon-dui1"
    }
    text.textContent = msg
}

function disappear() {
    modal.style.opacity = "0"
    modal.style.top = "0px"
}
function showModal() {
    let vmodal=document.querySelector('.v-modal')
    vmodal.style.display = 'block'
}
